<template>
  <div>
    <el-form ref="data" label-width="auto">
      <el-table border :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" :data="MachineData" style="width: 100%">
        <el-table-column align="center" label="柜机编码">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].machineNumber`">
              <el-input v-model="MachineData[scope.$index].machineNumber" autocomplete="off" placeholder="请填写"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所在地">
          <template slot-scope="scope">
              <el-form-item :prop="`machine[${scope.$index}].position`">
                <el-cascader
                    placeholder="请选择地区"
                    size="default"
                    :options="options"
                    v-model="position[scope.$index]"
                    @change="value => handleAddressChange(value, scope.$index)">
                </el-cascader>
              </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="详细地址">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].address`">
              <el-input v-model="MachineData[scope.$index].address" autocomplete="off" placeholder="请填写"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备型号">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].isModel`">
              <el-select v-model="MachineData[scope.$index].isModel" placeholder="请选择">
                <el-option label="DOSON 32" value="DOSON 32"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="存藏类型">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].storageStatus`">
              <el-select v-model="MachineData[scope.$index].storageStatus" placeholder="请选择">
                <el-option label="冷藏" value="1"></el-option>
                <el-option label="常温" value="0"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="MAC">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].mac`">
              <el-input v-model="MachineData[scope.$index].mac" autocomplete="off" placeholder="请填写"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="安装日期">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].installDate`">
              <el-date-picker
                  v-model="MachineData[scope.$index].installDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否开通">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].machineStatus`">
              <el-select v-model="MachineData[scope.$index].machineStatus" placeholder="请选择">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="4"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开通时间">
          <template slot-scope="scope">
            <el-form-item :prop="`machine[${scope.$index}].openDate`">
              <el-date-picker :disabled="MachineData[scope.$index].machineStatus==4"
                              v-model="MachineData[scope.$index].openDate"
                              type="datetime"
                              placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.$index !== MachineData.length - 1" @click="handleDeleteRow(scope.$index)" type="text"><span style="font-size: xx-large;">-</span></el-button>
            <el-button v-if="scope.$index === MachineData.length - 1" type="text" @click="addRow(scope.$index)"><span style="font-size: xx-large;">+</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div>
      <el-button type="primary" size="small" @click="submit">确认</el-button>
      <el-button size="small" @click="closeAddMore()">取消</el-button>
    </div>
  </div>
</template>
<script>
import  {save } from "@/api/machine/machine"
// import { save } from "@/api/machine/VendingMachine";
import { regionData, codeToText } from 'element-china-area-data'
import index from "vue-lazyload";

export default {
  name: "AddMore",
  data() {
    return {
      MachineData: [
        {
          machineNumber:'',
          position:'',
          address:'',
          isModel:'',
          storageStatus:'',
          mac:'',
          installDate:'',
          machineStatus:'',
          openDate:'',
        }
      ],
      position: [],
      options: regionData,
    }
  },
  methods: {
    closeAddMore() {
      this.resetForm();
      this.$router.go(-1);
    },
    index() {
      return index
    },
    /*添加行*/
    addRow(index) {
      this.MachineData.push({
        machineNumber:'',
        position:'',
        address:'',
        isModel:'',
        storageStatus:'',
        mac:'',
        installDate:'',
        machineStatus:'',
        openDate:'',
      });
      this.MachineData[index+1].isModel=this.MachineData[index].isModel;
      this.MachineData[index+1].storageStatus=this.MachineData[index].storageStatus;
      this.MachineData[index+1].installDate=this.MachineData[index].installDate;
      this.MachineData[index+1].machineStatus=this.MachineData[index].machineStatus;
      this.MachineData[index+1].position=this.MachineData[index].position;
      this.position[index+1]=this.location[index];
    },
    /*删除行*/
    handleDeleteRow(index) {
      if (this.MachineData.length > 1) {
        this.MachineData.splice(index, 1);
      }
    },
    /*重置表单*/
    resetForm() {
      this.MachineData = [
        {
          machineNumber:'',
          position:'',
          address:'',
          isModel:'',
          storageStatus:'',
          mac:'',
          installDate:'',
          machineStatus:'',
          openDate:'',
        }
      ];
      this.position=[];
    },
    /*提交表单*/
    submit() {
      this.MachineData.forEach(item => {
        if (item.machineStatus === '4'){
          item.openDate = null;
        }
      })
      save(this.MachineData).then(res => {
        this.$modal.msgSuccess("批量添加成功");
      })
      this.$message({
        message: '提交成功',
        type: 'success'
      });
    },
    handleAddressChange(value, index) {
      this.MachineData[index].position = value.map(item => codeToText[item]).join('-').trim();
    },
  }
}
</script>

<style scoped>

</style>
